<template>
  <div class="messageShow_panel">
    <div v-for="(item, index) in messages" :key="index">
      <div class="message_item" :class="{ 'self': item.isSelf }">

        <div class="avatar">
          <img :src="item.avatar">
        </div>

        <div>
          <div class="userName" :class="{ 'self_name': item.isSelf }">
            {{ item.userName }}
          </div>

          <div class="content">
            {{ item.content }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';

export interface ChatShowItem {
  userId: number;
  isSelf: boolean;
  avatar: string;
  userName: string;
  content: string;
}

const props = defineProps({
  messages: {
    type: Array<ChatShowItem>
  }
})

const messages = computed({
  set() {
    return props.messages;
  },
  get() {
    return props.messages;
  }
})

</script>

<style lang="scss" scoped>
.messageShow_panel {
  display: flex;
  flex-flow: column;
  overflow-y: auto;
  padding: 2%;
  flex: 1;
  gap: 5px;

  &::-webkit-scrollbar {
    display: none;
  }

  .message_item {
    display: flex;
    gap: 5px;

    &.self {
      flex-direction: row-reverse;
    }

    .avatar {
      height: 40px;
      width: 40px;
      flex-shrink: 0;

      img {
        height: 100%;
        width: 100%;
        border-radius: 50%;
      }
    }

    .userName {
      font-size: 10px;
      opacity: 0.8;

      &.self_name {
        text-align: end;
      }
    }

    .content {
      margin-top: 1%;
      padding: 10px;
      border-radius: 10px;
      background-color: rgb(245, 245, 245);
      min-height: 20px;
      word-break: break-all;
      /* 让 content 基于 user_info 的宽度自适应，不受 userName 宽度限制 */
      width: fit-content;
    }
  }
}
</style>
